<!--  -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <Bread>
      <BreadItem to="'/'" @click.native="$router.push('/indexView')"
        >首页</BreadItem
      >
      <!-- 切换路由时面包屑的动画 -->
      <transition name="bread">
        <BreadItem :key="cateList.id">{{ cateList.name }}</BreadItem>
      </transition>
    </Bread>
    <!-- 轮播图 -->
    <div class="banner">
      <CateBanner :BannerList="BannerList"></CateBanner>
    </div>
    <!-- 子分类 -->
    <ChildrenCate :cateList="cateList" :nowId="nowId"></ChildrenCate>
  </div>
</template>

<script>
// 引入面包屑组件
import Bread from "../utils/Bread.vue";
import BreadItem from "../utils/BreadItem.vue";
// 引入轮播图组件
import CateBanner from "../Banner.vue";
// 引入api
import { getBanner } from "@/utils/Api/HomeApi";
import { getCateList } from "@/utils/Api/CateApi";
// 子分类组件
import ChildrenCate from "@/components/Category/ChildrenCate.vue";
export default {
  components: {
    Bread,
    BreadItem,
    CateBanner,
    ChildrenCate,
  },
  data() {
    return {
      // 轮播图数据
      BannerList: [],
      //当前页面的id
      nowId: null,
      //分类列表
      cateList: [],
    };
  },
  mounted() {
    // 获取轮播图数据
    this.getBannerData();
    // 获取路由传递的id
    this.nowId = this.$route.query.id;
    this.getCate();
  },
  methods: {
    // 获取轮播图数据
    async getBannerData() {
      let { data } = await getBanner();
      this.BannerList = data.result;
    },
    // 获取分类列表数据
    async getCate() {
      let { data } = await getCateList(this.$route.query.id);
      this.cateList = data.result;
    },
  },
  watch: {
    $route: {
      handler() {
        // 调用分类数据列表的接口
        this.getCate();
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  width: 1240px;
  height: 500px;
}
// 进入之前 离开之后
.bread-enter,
.bread-leave-to {
  transform: translateX(-20px);
  opacity: 0;
}

// 离开之前和进入之后
.bread-enter-to,
.bread-leave {
  transform: translateX(0px);
  opacity: 1;
}

// 进入时的动画过渡
.bread-enter-active {
  transition: all 1s;
}
</style>
